<template>
  <div class="content">
    <div class="mental-content">
      <div class="data-wrap" v-for="(item, index) in mentalData" :key="index" :class="{ active: activeIndex === index }"
        @click="activeIndex = index">
        <div class="radar">
          <img :src="complex" alt="">
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="switch-content">
      <div class="switch-item flex-center" v-for="(item, index) in switchData" :key="index"
        :class="{ active: activeSwitchIndex === index }" @click="activeSwitchIndex = index" :style="{
          left: `${(index + 1) * 45}px`,
          backgroundColor: item.bgColor,
          border: `1px solid ${item.borderColor}`
        }">
        <div class="switch-item-img flex-center" :style="{
          backgroundColor: item.bgColorImg
        }">
          <img :src="item.icon" alt="">
        </div>
      </div>
      <div class="switch-item-text">场所选择</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import complex from '@/assets/image/screen/Home/image_06.svg'
import switchImg from '@/assets/image/screen/Home/image_02.svg'
// 数据
const mentalData = ref([
  { name: '住宅', icon: complex },
  { name: '综合体' },
  { name: '公寓' },
  { name: '办公楼' },
  { name: '园区' }
])

// 切换按钮数据
const switchData = ref([
  {
    icon: switchImg,
    bgColor: 'rgba(76, 175, 80, 0.3)',  // 绿色
    bgColorImg: 'rgba(76, 175, 80, 1)',  // 绿色
    borderColor: '#4CAF50',
    text: '住宅'
  },
  {
    icon: switchImg,
    bgColor: 'rgba(33, 150, 243, 0.3)',  // 蓝色
    bgColorImg: 'rgba(33, 150, 243, 1)',  // 蓝色     
    borderColor: '#2196F3',
    text: '场所选择'
  },
  {
    icon: switchImg,
    bgColor: 'rgba(255, 152, 0, 0.3)',  // 橙色
    bgColorImg: 'rgba(255, 152, 0, 1)',  // 橙色
    borderColor: '#FF9800',
    text: '公寓'
  }
])

// 激活状态 - 默认选中中间按钮
const activeIndex = ref(0)
const activeSwitchIndex = ref(1)
</script>
<style scoped lang="scss">
.content {
  width: 50%;
  height: 64px;
  left: 33%;
  bottom: 50px;
  z-index: 9999;
  display: flex;
  position: fixed;
  align-items: center;

  .switch-content {
    width: 28%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-left: -20px;
    .switch-item {
      width: 45px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      cursor: pointer;
      z-index: 1;

      // 未选中状态 - 暗淡效果
      opacity: 0.6;
      filter: grayscale(0.3);

      &:hover {
        transform: scale(1.1);
        opacity: 0.8;
        filter: grayscale(0.1);
      }

      &.active {
        transform: scale(1.2);
        z-index: 2;
        opacity: 1;
        filter: grayscale(0);

        // 选中时的强调效果 - 使用自己的颜色
        border-width: 2px;
        border-style: solid;
      }



      .switch-item-img {
        width: 70%;
        height: 70%;
        border-radius: 50%;
        margin: 0 auto;
        background-color: transparent;
        transition: all 0.3s ease;

        img {
          filter: brightness(0) invert(1);
        }
      }

    }
  }

  .mental-content {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 10px 10px;
    background: rgba(209, 226, 235, 0.7);
    box-shadow: 0px 4px 12px 0px rgba(21, 32, 49, 0.12);
    gap: 12px;

    .data-wrap {
      width: 112px;
      height: 100%;
      display: flex;
      color: #525A66;
      cursor: pointer;
      align-items: center;
      position: relative;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 0 12px 0 8px;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

      &:hover {
        // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        background: rgba(255, 255, 255, 0.6);

        .radar {
          // background-color: rgba(43, 116, 255, 0.1);
        }
      }

      &.active {
        color: white;
        background: linear-gradient(135deg, rgba(24, 114, 249, 1), rgba(51, 146, 255, 0.8));
      }

      .radar {
        height: 42px;
        width: 42px;
        border-radius: 4px;
        position: relative;
        margin-right: 0px;
        overflow: hidden;

        transition: all 0.3s ease;

        img {
          height: 100%;
          width: 100%;
          // filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2475%) hue-rotate(86deg) brightness(118%) contrast(119%);
        }
      }

      .number {
        font-size: 24px;
        font-weight: bold;
        text-shadow: 0 0 15px rgba($color: #2b74ff, $alpha: 0.8);
      }

      .name {
        font-weight: 400;
        font-size: 16px;
        font-family: 微软雅黑;
        transition: color 0.3s ease;
      }
    }
  }

  .switch-item-text {
    left: 28%;
    bottom: -25px;
    position: absolute;
    letter-spacing: 2px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: Alimama FangYuanTi VF;
    font-weight: normal;
    font-size: 16px;
    color: #4899d7;
    text-shadow: 0px 3px 5px rgba(0, 68, 170, 0.8);
  }
}
</style>
